<!--机构端-考试培训 -->
<template>
	<view class="course-container">
		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(course, index) in publicbkz" :key="index">
				<view class="course-left">
					<u-image :src="course.cover" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
				</view>

				<view class="course-right">
					<text class="course-name">{{ course.bkz_name }}</text>
					<text class="course-level">可报名等级：{{ course.bkz_levelnames }}</text>
					<text class="course-teacher">报名截止时间：{{ course.bkz_bmenddate }}</text>
					<text class="course-count">报名城市：{{ course.bkz_bkcs }}</text>
					<text class="course-price">报名费用：¥{{ course.bkzprice }}元起/人</text>


					<view class="course-actions">
						<text class="course-category"></text>
						<!-- 是否购买pusrchased -->
						<u-button v-if="!course.purchased" type="default" size="medium" shape="circle"
							@click="buyCourse(course.bkz_code)" :custom-style="customStyleObject">
							报名
						</u-button>
						<u-button v-else type="default" size="medium" shape="circle" @click="studyCourse(course.id)" :custom-style="customStyleObject">
							已截止
						</u-button>

					</view>
				</view>

			</view>
		</view>
		<view class="kong-content">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 按钮组中的样式写法
				customStyleObject: {
					"marginRight": '20rpx',
					"color":'#ffffff',
					"background-color":'#03B8CD'				
				},
				value1: '',
				value2: '2',
				options1: [{
						label: '考试',
						value: 1,
					},
					{
						label: '培训',
						value: 2,
					},
					{
						label: '考培',
						value: 3,
					}
				],
				options2: [{
						label: '一级',
						value: 1,
					},
					{
						label: '二级',
						value: 2,
					},
					{
						label: '三级',
						value: 3,
					}
				],
				courseList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '前端开发高级课程',
						level: '一级、二级、三级、四级',
						expirDate: '6月20日 00:00',
						lessonCount: 45,
						price: '80.00',
						city: '福州',
						purchased: false  //是否购买
					},
					{
						id: 2,
						cover: '/static/course2.jpg',
						name: 'UI设计实战课程',
						level: '一级',
						expirDate: '6月10日 00:00',
						lessonCount: 45,
						price: '80.00',
						city: '福州',
						purchased: true
					}
				],
				bkzprice: '' , ////最低的费用金额
			}
		},
		computed:{
			// 过滤只显示发布的考证
			publicbkz() {
				return  this.courseList.filter(item => String(item.bkz_publishstate) == '1')
			} 
		},
		onShow() {
			// 分页查询考证列表
			this.$u.api.querykzlist({
				"bkzname":"", //#考证名称 不传查询所有
				"bkzlevel":"", //#考证等级吧 不传查询所有
				"bkzstatus":""  //#状态0未发布，1已经发布，2已经结束 不传查询所有
			}).then(res => {
				
				this.courseList = []
				this.courseList = res.data.base_info
				for(var i=0; i< this.courseList.length; i++) {
					this.courseList[i] = {
						...this.courseList[i],
						bkzprice:this.minPrice(this.courseList[i].bkz_levels)
					}
				}
			  console.log('考试列表：', this.courseList)
				
			})
		},
		methods: {
			// 最低的费用
			minPrice(price) {
				if(!price.length) return null;
				// return Math.min(...price.map(item => item.kzl_price))
				let minprice = price.reduce((min, current) => 
				    current.kzl_price < min.kzl_price ? current : min
				  );
				return minprice.kzl_price
				// console.log('mini:', minprice,minprice.kzl_price)
				
			},
			changeLevel(index) {
				this.currentLevel = index;
				// 这里可以根据选择的等级筛选课程
				// this.filterCourses();
			},
			
			// 报名
			buyCourse(code) {
				// uni.showToast({
				// 	title: '购买课程: ' + id,
				// 	icon: 'none'
				// });
				// 实际开发中调用报名接口
				uni.navigateTo({
					url: `/pages/Institution/examTrain/examdetails?code=${code}`
				});
			},
			// 带参数跳转
			studyCourse(id) {
				uni.navigateTo({
					url: `/pages/course/study?id=${id}`
				});
			},
			change(index) {
				this.$u.toast(`点击了第${index}项`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.course-container {
		padding: 20rpx;
		// background-color: #f5f7fa;
		background: linear-gradient(to bottom, #CAEDEE, #F1F7F7);
	}

	.category-header {
		padding: 20rpx 0;

		.category-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.filter-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;

		.filter-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.filter-tags {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				margin-right: 20rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.course-list {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 20rpx solid  #F1F7F7;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;

	}

	.course-name {
		font-size: 26rpx;
		font-weight: bold;
		color: #303133;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 24rpx;
			color: #ff9900;
			margin-left: 10rpx;
		}
	}
	
	.course-count {
		font-size: 26rpx;
		color: #606266;
		margin-right: 10px;
	}
	.course-price {
		font-size: 24rpx;
		color: #FA4646;
		font-weight: bold;
	}

	.course-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;


		.course-category {
			font-size: 24rpx;
			color: #999;
			background-color: #f5f7fa;
			padding: 6rpx 12rpx;
			border-radius: 20rpx;
			margin-left: 100rpx;
		}

		/deep/ .u-size-medium {
			height: 30px;
			line-height: 30px;

		}
	}
	.kong-content {
		height: 45px;
		width: 100%;
	}
</style>